<template>
    <div class="productinfo-container">
        <swiper :swipelist="product_list.imgurls"></swiper>
        <div class="txt-box">
            <h3>{{product_list.name}}</h3>
            <h4 class="price">￥：{{product_list.Price}}</h4>
            <div class="number">
                <span>购买数量：</span>
                <Input-number :max="10" :min="1" v-model="sum"></Input-number>
            </div>
            <Button type="success" long @click="addCart()">加入购物车</Button>
        </div>
    </div>
</template>
<script>
import axios  from 'axios'
import swiper from '../public/swiper.vue'
    export default {
        data(){
            return {
                product_list:[],
                sum:1
            }
        },
        components:{
            swiper
        },
        methods:{
            addCart(){
                var cartList = this.product_list;
                cartList.num = this.sum;
                this.$store.commit('call',(data)=>{
                    data.push(cartList)
                    return data;
                })
            }
        },
        mounted(){
            axios.get('src/json/commodity.json', {} , {emulateJSON: true}).then((response) => {
                this.product_list = response.data.list;
                response.data.list.some((item,index,array)=>{
                    if(item.id === this.$route.params.id){
                        this.product_list = item;
                        return true;
                    }
                });
            }).catch(function (error) {
                console.log(error);
            })
        },
        watch:{
            "sum":function(newVal){
                console.log(newVal);
            }
        }
        
    }
</script>
<style lang="less" scoped>
    .productinfo-container{
        .txt-box{
            padding: 10px;
            h3{
                font-size:2.7rem;
                font-weight: normal
            }
            .price{
                color: red;
                font-size: 3rem;
                padding: 20px 0;
            }
            .number{
                padding-bottom: 20px;
            }
        }
        
    }
</style>
